<style>
@media print {
  ._wz_notifyReply {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_cent_main _wz_notifyReply" ref="notifyReply" :style="formType?'height: calc(100% - 55px);':'height: 100%;'">

    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td class='_wz_td' style="font-weight: 600;position:relative;text-align: center;" colspan="6">
          {{!!formData.noticeTitle?formData.noticeTitle:'--'}}
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">打印</Button>
        </td>
      </tr>
      <tr>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">通知等级</td>
        <td class='_wz_td'>
          <template v-if="!!formData.noticeLv">
            <Tag type="dot" color="success" v-if="formData.noticeLv == 1">普通</Tag>
            <Tag type="dot" color="warning" v-else-if="formData.noticeLv == 2">重要</Tag>
            <Tag type="dot" color="error" v-else-if="formData.noticeLv == 3">紧急</Tag>
          </template>
          <template v-else>--</template>
        </td>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">回复状态</td>
        <td class='_wz_td'>
          <Tag type="dot" color="success" v-if="formData.noticeReplyType == 0">无需回复</Tag>
          <Tag type="dot" color="warning" v-else-if="formData.noticeReplyType == 1">需要回复</Tag>
        </td>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">截止时间</td>
        <td class='_wz_td'>
          <template v-if="!!formData.noticeEndTime">
            <template v-if="new Date(formData.noticeEndTime).getTime() > new Date().getTime()">{{formData.noticeEndTime}}</template>
            <template v-else style="color: #f00;">{{formData.noticeEndTime+ '（已超时）'}}</template>
          </template>
          <template v-else>
            <Tag type="dot" color="success">不限时</Tag>
          </template>
        </td>
      </tr>
      <tr>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">下发机构</td>
        <td class='_wz_td'>{{!!formData.orgName?formData.orgName:'--'}}</td>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">下发人</td>
        <td class='_wz_td'>{{!!formData.orgContact?formData.orgContact:'--'}}</td>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">通知时间</td>
        <td class='_wz_td'>{{!!formData.publishTime?formData.publishTime:'--'}}</td>
      </tr>
      <tr v-if="!!formData.noticeFileUrl">
        <td class='_wz_td' style="text-align: right;font-weight: 600;">通知文件</td>
        <td class='_wz_td' colspan="5">
          已添加通知文件
          <Button type="primary"  v-if="!!formData.noticeFileType" @click="downloadFile(apiUrl.imgUrl + formData.noticeFileUrl)"><span style="color: #fff;margin: 0px;">查看附件</span></Button>
        </td>
      </tr>
      <tr>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">通知内容</td>
        <td class='_wz_td' colspan="5" v-html="formData.noticeContent" style="padding: 10px;"></td>
      </tr>
      </tbody>
    </table>

    <table v-if="seeData" cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <td class='_wz_td' style="font-weight: 600;position:relative;text-align: left;" colspan="6">回复内容</td>
      <tr>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">运输企业</td>
        <td class='_wz_td' colspan="5">{{!!formData.deptName?formData.deptName:'--'}}</td>
      </tr>

      <tr>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">运输类型</td>
        <td class='_wz_td'>{{!!formData.deptTypeName?formData.deptTypeName:'--'}}</td>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">签收时间</td>
        <td class='_wz_td'>{{!!formData.readTime?formData.readTime:'--'}}</td>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">回复时间</td>
        <td class='_wz_td'>{{!!formData.replyTime?formData.replyTime:'--'}}</td>
      </tr>
      <tr v-if="!!formData.replyFile">
        <td class='_wz_td' style="text-align: right;font-weight: 600;">回复文件</td>
        <td class='_wz_td' colspan="5">
          已添加回复文件
          <Button type="primary"  v-if="!!formData.noticeFileType" @click="downloadFile(apiUrl.imgUrl + formData.replyFile)"><span style="color: #fff;margin: 0px;">查看附件</span></Button>
        </td>
      </tr>
      <tr>
        <td class='_wz_td' style="text-align: right;font-weight: 600;">回复内容</td>
        <td class='_wz_td' colspan="5" v-html="formData.replyContext" style="padding: 10px;"></td>
      </tr>
      </tbody>
    </table>

    <!--表单-->
    <Card style="margin: 10px 0 0 0;" class="no-print" v-if="formType">
      <p slot="title">通知回复</p>
      <Form ref="formAdd" :model="formData1" label-position="right" :label-width="80" :rules="ruleValidate">
        <FormItem label="回复文件">
          <Upload :before-upload="multipartFileFun" action="" style="color: #2d8cf0;cursor: pointer;display: inline-block;">上传回复文件</Upload>
          {{multipartFile.name}}
          <span v-if="!!formData1.replyFile" @click="downloadFile(apiUrl.imgUrl +formData1.replyFile)" style="cursor: pointer;">查看附件</span>
        </FormItem>
        <FormItem label="回复内容" prop="replyContext">
          <i-input v-model="formData1.replyContext" placeholder="请填写回复内容" maxlength="1000" show-word-limit type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
        </FormItem>
      </Form>
    </Card>



    <div class="demo-drawer-footer no-print" v-if="formType" style="z-index: 3;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>





  </div>
</template>
<script>

  export default {
    props: ['selectData'],
    data() {
      return {
        heightType:'100%',
        modal: false,
        multipartFile: {
          data: null,
          name: ''
        },
        ruleValidate: {
          replyContext: [
            {required: true, message: '请填写回复内容', trigger: 'blur'},
          ],
        },
        formData: {},
        seeData: false,//查看数据状态
        formType: false,//表单状态


        formData1: {},
      }
    },
    computed: {//计算属性

    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.formData = JSON.parse(JSON.stringify(that.selectData));
      that.formData1 = JSON.parse(JSON.stringify(that.selectData));


      if (that.selectData.noticeReadState == 0) {//未读
        if(!that.selectData.noticeEndTime){
          that.axios.post(that.apiUrl.noticeOrgMessageNoticeOrgMessageRecordRead, {uuid: that.selectData.uuid})
        }else{
          if (new Date(that.selectData.noticeEndTime).getTime() > new Date().getTime()) {//未超时
            that.axios.post(that.apiUrl.noticeOrgMessageNoticeOrgMessageRecordRead, {uuid: that.selectData.uuid})
          }
        }
      }

      if(that.selectData.noticeReplyType != 0) {//需要回复
        if(that.selectData.noticeReplyState != 0){//回复了
          that.seeData = true;//查看数据状态
        }
        if (!(!!that.selectData.noticeEndTime && new Date(that.selectData.noticeEndTime).getTime() < new Date().getTime())) {//!!超时&&超时
          that.formType = true;//查看数据状态
        }
      }

      that.formData = JSON.parse(JSON.stringify(that.selectData));


    },
    methods: {//执行的方法
      printTest() {
        this.$print(this.$refs.notifyReply) // 使用
      },
      multipartFileFun(file) {//通知文件
        let that = this;
        that.multipartFile = {
          data: file,
          name: file.name
        };
        that.formData.replyFile = null;
        return false;
      },
      addSubmit(name) {
        var that = this;
        this.$refs[name].validate((valid) => {
          if (valid) {

            var data = that.formData1;
            data.noticeReadState = 1;
            let formData = new FormData();
            if (!!that.multipartFile.data) {
              formData.append('multipartFile', that.multipartFile.data)
            }

            for (let key in data) {
              formData.append(key, data[key]);
            }

            that.axios.post(that.apiUrl.noticeOrgMessageNoticeOrgMessageRecordReply, formData, that.public.parameterUploadProgress(that)).then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("回复成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })

          } else {
            that.$Message.error('请正确填写表单');
            return false;
          }
        })
      },
      //查看文件
      downloadFile(data) {
        window.open(data);
      }

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_notifyReply {
    height: calc(100% - 55px);
    overflow: auto;

    >table {
      table-layout:fixed;
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px !important;

      ._wz_td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border: 1px solid #515a6e;
        padding: 0 10px;
        word-break: break-word;
      }
    }
  }

</style>
